<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽题系统</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f7f7f7;
  }
  #questionBox {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  button {
    margin-top: 20px;
  }
</style>
</head>
<body>
<div id="questionBox">
  <h2>抽题系统</h2>
  <p id="question">点击按钮开始抽题...</p>
  <button onclick="drawQuestion()">抽题</button>
</div>

<script>
// 题目数组
const questions = [
  "第一个题目的内容",
  "第二个题目的内容",
  "第三个题目的内容",
  // ...更多题目
];

// 抽题函数
function drawQuestion() {
  // 获取题目数量
  const length = questions.length;
  // 随机生成一个索引
  const randomIndex = Math.floor(Math.random() * length);
  // 获取随机题目
  const question = questions[randomIndex];
  // 显示题目
  document.getElementById('question').innerText = question;
}
</script>
</body>
</html>